<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css</title>
<link href="../hc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../hc.js"></script>
<style type="text/css" title="">
html
{
padding:0 !important;
padding:58px 0 36px 0;
}
#bar
{
position:absolute;
top:0;
left:0;
width:100%;
height:26px;
}
#cmd{
position:absolute;
top:26px;
left:0;
width:100%;
height:32px;
}
#mid
{
position:absolute;
top:58px;
left:0;
right:0;
bottom:36px;
width:100%;
height:auto !important;
height:100%;
overflow:auto;
}
#foot
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:36px;
}
#credits
{
margin:2px;
background:#fafaff;
}
.mnu
{
background:url("ui/bg2.gif") repeat-x;
}
.nav
{
border-top:solid 1px #cde;
border-bottom:solid 1px #cde;
/*background:url("ui/tbg.gif") repeat-x;*/
}
#subm
{
top:200px;
left:200px;
width:200px;
}
.btn2
{
background:url("ui/bg2.gif") no-repeat;
}
.dv
{
width:601px;
}
</style>
</head>

<body>
<div id="bar">
<ul id="mnu" class="mnu">
	<li class="l"><a href="#" id="hcg"><img src="icos/45.png" class="ico" /><img src="icos/arwcbo.gif" class="d" style="padding:9px 0 0 4px;" /></a></li>
	<li class="zl">&nbsp;</li>
	<li class="l"><a href="#"><span class="t">lb</span></a></li>
	<li class="r"><a href="#"><span class="t">ra</span></a></li>
	<li class="zr">&nbsp;</li>
	<li class="r"><a href="#">rb</a></li>
</ul>
</div>
<div class="dm" id="mmnu" style="display:none;">
	<div class="x">
		<a href="#"><span class="ico">&nbsp;</span>
		<span class="t">dropdown menu1</span></a>
	</div>
	<div class="x">
		<a href="#"><span class="ico">&nbsp;</span>
		<span class="t">dropdown menu2</span></a>
	</div>
	<div class="z">&nbsp;</div>
	<div class="x">
		<a href="#"><img src="icos/20.png" class="ico" />
		<span class="t">office</span>
		<em>(<kbd>o</kbd>)</em></a>
	</div>
	<div class="x">
		<a href="#"><img src="icos/12.png" class="ico" />
		<span class="t">print</span>
		<em>(<kbd>p</kbd>)</em></a>
	</div>
	<div class="x" onmouseover="if(!$$.contex)sub(this);$$.contex=true;" onmouseout="if($$.contex)sub(this);$$.contex=false;">
		<a href="#"><img src="icos/45.png" class="ico" />
		<span class="t">home</span>
		<em>(<kbd>h</kbd>)</em>
		<span class="m"><img src="ui/arwrl.gif" style="padding:4px 0 4px;" /></span></a>
	</div>
</div>
<div class="dm" id="subm" style="display:none;" onmouseover="$$.contex=true;" onmouseout="$$.contex=false;">
	<div class="x">
		<a href="#"><span class="ico">&nbsp;</span><span class="t">submenu1</span></a>
	</div>
	<div class="x">
		<a href="#"><span class="ico">&nbsp;</span><span class="t">submenu2</span></a>
	</div>
	<div class="z">&nbsp;</div>
	<div class="x">
		<a href="#"><img src="icos/20.png" class="ico" />
		<span class="t">office</span>
		<span class="s">(<span class="k">o</span>)</span></a>
	</div>
	<div class="x">
		<a href="#"><img src="icos/12.png" class="ico" />
		<span class="t">print</span>
		<span class="s">(<span class="k">p</span>)</span></a>
	</div>
	<div class="x">
		<a href="#"><img src="icos/45.png" class="ico" />
		<span class="t">home</span>
		<span class="s">(<span class="k">h</span>)</span>
		<span class="m"><img src="ui/arwrl.gif" style="padding:4px 0 4px;" /></span></a>
	</div>
</div>
<div id="cmd">
<ul class="nav">
	<li class="l"><a href="#"><img src="icos/45.png" class="ico" /><span class="t">la</span></a></li>
	<li class="zl">&nbsp;</li>
	<li class="l"><a href="#"><span class="t">lb</span></a></li>
	<li class="r"><a href="#"><span class="t">ra</span><img src="icos/arwcbo.gif" class="d" style="padding:12px 0 0 4px;" /></a></li>
	<li class="zr">&nbsp;</li>
	<li class="r"><a href="#"><span class="t">rb</span></a></li>
</ul>
</div>
<div id="mid">
<div>
<div class="mnu">
	<span class="l"><a href="#"><span class="t">la</span></a></span>
	<span class="zl">&nbsp;</span>
	<span class="l"><a href="#"><span class="t">lb</span></a></span>
	<span class="l"><a href="#"><span class="t">lc</span></a></span>
	<span class="r"><a href="#"><span class="t">rb</span></a></span>
	<span class="zr">&nbsp;</span>
	<span class="r"><a href="#"><span class="t">ra</span></a></span>
	<span class="r"><a href="#"><span class="t">rc</span></a></span>
</div>
</div>
<br />
<div>
<div class="nav">
	<span class="l"><a href="#"><span class="t">la</span></a></span>
	<span class="zl">&nbsp;</span>
	<span class="l"><a href="#"><span class="t">lb</span></a></span>
	<span class="l"><a href="#"><span class="t">lc</span></a></span>
	<span class="r"><a href="#"><span class="t">rb</span></a></span>
	<span class="zr">&nbsp;</span>
	<span class="r"><a href="#"><span class="t">ra</span></a></span>
	<span class="r"><a href="#"><span class="t">rc</span></a></span>
</div>
</div>
<br />
<div style="position:relative;float:left;clear:both;">
</div>
<hr />
<div style="position:relative;float:right;clear:both;">
	<div id="tab" class="tab">
		<div class="bar">
			<ul>
			<li><a href="#"><span class="t">tab1</span></a></li>
			<!--<li><a href="#"><div class="t">tab2</div><em>(<kbd>b</kbd>)</em></a></li>-->
			<li><a href="#"><img src="icos/45.png" class="ico" /><span class="t">home</span></a></li>
			<li><a href="#" class="a"><img src="icos/20.png" class="ico" /><span class="t">office</span><em>(<kbd>c</kbd>)</em></a></li>
			<li class="r"><a href="#"><img src="icos/tab_add.gif" class="ico" /></a></li>
			</ul>
		</div>
		<div class="v">
			<div style="position:relative;float:left;width:400px;height:400px;">
				<form method="post" class="f" action="">
				<fieldset class="fs">
					<legend class="l">legend</legend>
				<label class="pl"><em>x1</em><input type="text" value="tab x1" /></label>
				<div class="pr">
					<img src="motif/peru.jpg" alt="a" />
				</div>
				<label class="pl"><em>x2</em><input type="text" value="tab x2" /></label>
				<label class="pl"><em>x3</em><input type="text" value="tab x3" /></label>
				<label class="pl"><em>x4</em><input type="text" value="tab x4" /></label>
				<label class="pl"><em>x5</em><input type="text" value="tab x5" /></label>
				<label class="pl"><em>x3</em><input type="text" value="tab x3" /></label>
				<label><em>x2</em><input type="text" value="tab x2" /></label>
				<label><em>x3</em><input type="text" value="tab x3" /></label>
				</fieldset>
				</form>
			</div>
		</div>
		<div class="x">
			tabv
		</div>
	</div>
</div>
<div style="position:relative;float:left;width:600px;height:400px;clear:both;">
	<form method="post" class="f" action="" style="position:relative;float:left;">
	<input type="text" value="input" onclick="alert(this.offsetHeight);" />
	<dl>
		<dt>dt</dt>
		<dd class="l"><label>x1</label><input type="text" class="tx" style="width:172px" value="tab x1" />
		<a href="#" class="btn" style="text-align:center;width:25px;height:16px;line-height:16px;margin:0;margin-left:-1px;padding:1px;border:solid 1px #cdf;background:#eee;z-index:1;" onclick="alert(this.offsetHeight);"><span style="font-size:10px;">▼</span></a><label>m</label></dd>
		<dd class="r"><img src="motif/peru.jpg" alt="motif" /></dd>
		<dd class="l"><label>x2</label><input type="text" class="tx" value="tab x2" /></dd>
		<dd class="l"><label>x3</label><input type="text" class="tx" value="tab x3" /></dd>
		<dd class="l"><label>x4</label><input type="text" class="tx" value="tab x4" /></dd>
		<dd class="l"><label>x5</label><input type="text" class="tx" value="tab x5" /></dd>
		<dd class="l"><label>x3</label><input type="text" class="tx" value="tab x3" /></dd>
		<dd class="l"><label>x2</label><input type="text" class="tx" value="tab" /></dd>
		<dd class="l"><label>x3</label><input type="text" class="tx" value="tab" /></dd>
		<dd class="cmd">
			<button type="button" style="height:24px;width:80px;">按钮</button><button type="button"><img src="icos/12.png" class="ico" /><span class="t">打印</span></button>
			<button type="button" class="cmd">cmd按钮</button>
			<button type="button" class="cmd"><img src="icos/12.png" class="ico" /><span class="t">打印</span></button>
			<a href="#" class="btn" onclick="alert(this.offsetHeight);">更多</a>
			<a href="#" class="btn" onclick="alert(this.offsetHeight);"><input type="image" src="icos/12.png" class="ico" /><span class="t">printer</span><em>[<kbd>p</kbd>]</em></a>
			<a href="#" class="btn"><img src="icos/accept.gif" class="ico" /><span class="t">ok</span><em>[<kbd>o</kbd>]</em></a>
			<a href="#" class="btn"><img src="icos/cross.gif" class="ico" /><span class="t">cancel</span><em>[<kbd>c</kbd>]</em></a>
		</dd>
	</dl>
	</form>
</div>
<div align="center">
	<div id="dldt" class="dv">
		<dl class="tbl">
			<dt class="th">head</dt>
			<dd class="tr">
				<div class="tdk">
					lbl
				</div>
				<div class="tdv">
					data
				</div>
			</dd>
			<dd class="tr">
				<div class="tdk">
					lbl
					<br />
					lbl2
				</div>
				<div class="tdv">
					data
				</div>
			</dd>
			<dd class="tr">
				<div class="tdk">
					lbl label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label  label 
				</div>
				<div class="tdv">
					data
					<br />
					data2
					<br />
					data32value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value 2value
				<br />2value
				</div>
			</dd>
		</dl>
	</div>
</div>
<br />2<p style="line-height:800px;"><></p>1<br />
</div>
<div id="foot">
	<div id="credits">
	<span class="key">1</span>
	<span class="key">2</span>
	<span class="key">3</span>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
function sub(e){
	var _s=$("subm");
	var po=pos$(e);
	_s.style.left=po.right +"px";
	_s.style.top=po.top +"px";
	_s.style.display=_s.style.display=="none"?"block":"none";
}
bind$($('hcg'),'click',function(){
	var hc=$('hcg');
	var p=pos$(hc);//return alert(strJSON$(p));
	var hcm=$("mmnu");
	hcm.style.top=p.bottom +'px';
	hcm.style.left=p.left +'px';
	hcm.zIndex=p.zIndex +1;
	b=hcm.style.display=="none";
	hc.className=b ? "a" : "";
	hcm.style.display=b ? "block" : "none";
});
bind$(me,'mousedown',function(ev){
	me.oncontextmenu=function(e){var e=e||window.event;e.returnValue=false;return false;};
	var e=evt$(ev);
	var m=$("mmnu");
	if(e.mL){
		if(e.el!=m&&!$$.contex)m.style.display="none";
	}
	else if(e.mR){
		m.style.top=e.cY+1 +"px";
		if(e.cX+183>win$().width)
			m.style.left=e.cX-183 +"px";
		else
			m.style.left=e.cX+1 +"px";
		m.style.display="block";
	}
});
bind$(me,'keydown',function(ev){
	var e=evt$(ev);
	evt=ev||window.event;
	switch(e.key){
		case 113:
			alert('F2 is pressed.');
		break;
		case 93:
		case 112:
			evt.returnValue=false;
			return false;
		break;
		case 49:
		case 50:
		case 51:
		case 52:
		case 53:
			alert("no "+ (e.key-48) +" is selected!");
		break;
		default:
			/* alert(e.key); */
		break;
	}
});
//]]>
</script>
</body>
</html>
